<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wangzm
 * @LastEditTime: 2020-02-24 09:52:56
 * @description: file content
 -->
<template>
  <base-page-view class-name="new-member-pro-container">
    <view class="banner-block">
      <b-image src="https://oss.bisinuolan.cn/default-1582507300870-3cbe1277f5cd4134a1c03cedc00d3e03.png" mode="widthFix" />
      <view class="btn" @click="pShow=true">新人须知</view>
    </view>
    <view v-if="activityData.modules && activityData.modules.length" :style="pageStyle">
      <custom-modules :list="activityData.modules" />
    </view>
    <template v-if="!pageLoading">
      <view class="title">
        <b-image src="/static/images/new-member/title_icon.png" :is-asset="true" mode="aspectFit" />
      </view>
      <view class="list-block">
        <view v-for="(item, index) in list" :key="index" class="item-container">
          <goods-item class-name="list-item" layout="vertical" :goods-data="item" image-width="100%" tag-width="130rpx" />
        </view>
        <base-list-state :list-length="listLength" :list-query="{page_no: listQuery.page_no+1, page_size: listQuery.page_size}" :list-state="listState" />
      </view>
    </template>
    <base-popup :show="pShow" @close="closePopup">
      <view class="new-member-rules">
        <view class="title">新人须知</view>
        <view v-for="(item, index) in serviceList" :key="index" class="rule-item">
          <p>{{ item }}</p>
        </view>
        <view class="btn" @click="closePopup">我知道了</view>
      </view>
    </base-popup>
  </base-page-view>
</template>

<script>
import { mapState } from 'vuex'
import goodsItem from '@/components/goodsItem/index.vue'
import CustomModules from '@/components/customModules'
import { debounce } from '@/utils/tools'
import './index.scss'
export default {
  components: {
    goodsItem,
    CustomModules
  },
  data() {
    return {
      page_need_login: true,
      shareOption: {},
      pageLoading: false,
      listQuery: {
        page_no: 0,
        page_size: 10
      },
      list: [],
      listState: {
        loading: false,
        more: true
      },

      pShow: false,
      serviceList: [
        '1、新人专享价格仅限新用户下单使用，新人指的是注册成为碧选会员后，在碧选APP平台上没有任何支付行为的用户；',
        '2、新人专享价格仅限“新人专享”栏目内所呈现产品，包含多种价位档次不同产品。',
        '3、新会员专享商品中部分商品偏远地区不发货。新人专享商品一经售出概不退还。'
      ],

      activityId: '',
      activityConfig: {
        name: ''
      },
      activityData: {
        modules: []
      },
      pageStyle: ''
    }
  },
  computed: {
    ...mapState([
      'token'
    ]),
    listLength() { // 由于微信小程序无法自动更新base-list-state组件,故采用computed
      return this.list.length
    }
  },
  onLoad(option) {
    this.listQuery = {
      page_no: 0,
      page_size: 10
    }
  },
  onShow() {
    if (!this.token) {
      uni.setStorage({ key: 'pageAfterLogin', data: '/pagesActivity/new-member-ship/index' })
      this.$navigateTo('/pages/login/index', {}, 'redirectTo')
    }
  },
  onShareAppMessage(res) {
    return this.$queryShareOption(res, this.shareOption)
  },
  onPullDownRefresh() {
    this.listQuery.page_no = 0
    this.fetchData(true)
  },
  onReachBottom: debounce(function() {
    if (this.listState.more && !this.listState.loading) {
      this.listQuery.page_no++
      this.fetchData()
    }
  }, 500),
  methods: {
    app_interactive_data(option) {
      this.activityId = option.activityId || ''
      if (this.activityId) {
        this.fetchActivityData()
      }
      this.fetchData()
    },
    async fetchData(flag) {
      this.refreshFlag = !!flag
      this.listState.loading = true
      const res = await this.$api.excellentApi.newMembership(this.listQuery)
      if (this.listQuery.page_no === 0) {
        this.list = []
      }
      if (res.success) {
        const list = (res.data || []).map(i => {
          return {
            ...i,
            tag_img: `${process.env.VUE_APP_IMAGE_ASSET}/images/new-member/label_icon.png`
          }
        })
        this.list = this.list.concat(list)
        this.listState.more = list.length === this.listQuery.page_size
      }
      setTimeout(() => {
        uni.stopPullDownRefresh()
        this.refreshFlag = false
        this.listState.loading = false
      }, 500)
    },
    async fetchActivityData() {
      this.pageLoading = true
      const res = await this.$api.homeApi.getActivity({
        activity_id: this.activityId
      })
      if (res.success && res.data) {
        if (res.data.activity) {
          this.activityData = JSON.parse(res.data.activity.comment || '{ modules: [] }')
          delete res.data.activity.comment
          this.activityConfig = res.data.activity
          if (new Date(this.activityConfig.end_time * 1000) < new Date()) {
            this.activityData = {
              modules: []
            }
          } else {
            this.setBg()
          }
        }
      }
      this.pageLoading = false
    },
    // 设置背景
    setBg() {
      if (this.activityData.background) {
        this.pageStyle = `background: ${this.activityData.background}${this.activityData.background_image ? ` url(${this.activityData.background_image}) no-repeat cover` : ''};margin-bottom: 30rpx`
      }
    },
    closePopup() {
      this.pShow = false
    },
    // 分享初始化
    initShare() {
      if (this.activityId && (!this.activityConfig.share_login_state || this.token)) {
        this.shareOption.share_url = ''
        if (this.activityData.share_title) {
          this.shareOption.share_title = this.activityData.share_title
        }
        if (this.activityData.share_icon) {
          this.shareOption.share_icon = this.activityData.share_icon
          this.shareOption.share_image = this.activityData.share_icon
        }
        if (this.activityData.description) {
          this.shareOption.share_content = this.activityData.description
        }
        this.showShare()
      } else {
        this.hideShare()
      }
    }
  }
}
</script>
